<script>
import { numberToExcelColumn, getColumnWidth } from "./utils.js";
import JTableColumnCell from "./JTableColumnCell.vue";
export default {
  props: {
    helper: {
      type: Object,
      required: true,
    },
    cols: {
      type: Array,
      default: () => [],
    },
    fixVScrollWidth: {
      type: Number,
      default: 0,
    },
    selection: {
      type: Array,
      default: () => [],
    },
  },
  render(h) {
    return h(
      "div",
      {
        class: "jtable-header",
      },
      [
        this.cols.map((col, index) => {
          return h(
            JTableColumnCell,
            {
              class: "jtable-col-header-cell",
              props: {
                helper: this.helper,
                col: col,
                colIndex: index,
                isSelect:
                  this.selection[1] <= index && this.selection[3] >= index,
              },
            },
            numberToExcelColumn(index + 1)
          );
        }),
      ]
    );
  },
};
</script>

<style>
.jtable-header {
  position: relative;
  border-bottom: 1px solid gray;
  box-sizing: border-box;
  width: fit-content;
}
.jtable-col-header-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  border: none;
  background: #dbdbdb;
  /* border: 3px solid rgb(154, 154, 154)  ; */
}
.jtable-col-header-cell:first-child {
  border-left: rgb(154, 154, 154) solid 1px;
}
.jtable-col-header-cell:last-child {
  border-right: rgb(154, 154, 154) solid 1px;
}
</style>
